<!-- components/Breadcrumb.vue -->
<template>
    <nav aria-label="Breadcrumb">
      <ol class="breadcrumb">
        <li v-for="(crumb, index) in crumbs" :key="crumb.path" itemprop="itemListElement" itemscope :itemtype="base + crumb.path"
        >
          <NuxtLink 
            :to="crumb.path" 
            :class="{ 'last-crumb': index === crumbs.length - 1 }"
          >
            <span :itemprop="crumb.name">{{ crumb.name }}</span>
            <meta itemprop="position" :content="index + 1"></meta>
          </NuxtLink>
          <span v-if="index < crumbs.length - 1" class="separator">
            <img loading="lazy" src="/chevron-right.png" alt="separator" class="separator-icon" />
          </span>
        </li>
      </ol>
    </nav>
  </template>
  
  <script setup>
  const props = defineProps({
    crumbs: {
      type: Array,
      required: true
    }
  })
  const base = useRuntimeConfig().public.apiBase
  </script>
  
  <style scoped>
  .breadcrumb {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    font-family: Roboto, sans-serif;
    font-size: 14px;
  }
  
  .breadcrumb li {
    display: flex;
    align-items: center;
  }
  
  .separator {
    margin: 0 8px;
    display: flex;
    align-items: center;
  }
  
  .separator-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
  }
  
  .breadcrumb a {
    color: #505662;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .breadcrumb a:hover {
    color: #1890ff;
  }
  
  .last-crumb {
    color: #3E4351;
    font-weight: 500;
    pointer-events: none;
  }
  
  @media screen and (max-width: 950px) {
    .breadcrumb {
      font-size: 12px;
    }
    
    .separator-icon {
      width: 14px;
      height: 14px;
    }
  }
  </style>